<template>
  <div
    class="device-palette"
    :style="{ left: `${position.x}px`, top: `${position.y}px` }"
    ref="palette"
  >
    <h3 class="palette-title" @mousedown="startDrag">
      常用图标
      <img src="@/assets/images/drag.png" alt="" />
    </h3>
    <div class="device-card">
      <div class="device-icons">
        <div
          v-for="device in deviceTypes"
          :key="device.id"
          class="device-icon-container"
          draggable="true"
          @dragstart="onDragStart(device)"
          @click="$emit('add-device', device)"
        >
          <div class="device-icon">
            <img :src="device.icon" :alt="device.name" />
          </div>
          <span class="device-name">{{ device.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

defineProps({
  deviceTypes: {
    type: Array,
    required: true,
  },
});

defineEmits(["add-device"]);

// 组件位置
const position = ref({ x: 20, y: 60 });

// 拖拽状态
const isDragging = ref(false);
const startPosition = ref({ x: 0, y: 0 });

// 父组件边界
const parentRect = ref({ width: 0, height: 0 });
const palette = ref(null); // 组件引用

// 初始化父组件边界
onMounted(() => {
  const parent = palette.value.parentElement;
  if (parent) {
    parentRect.value = {
      width: parent.clientWidth,
      height: parent.clientHeight,
    };
  }
});

// 开始拖拽
const startDrag = (event) => {
  isDragging.value = true;
  // 记录鼠标按下时的初始位置
  startPosition.value = {
    x: event.clientX - position.value.x,
    y: event.clientY - position.value.y,
  };

  // 监听鼠标移动和松开事件
  window.addEventListener("mousemove", onDrag);
  window.addEventListener("mouseup", stopDrag);
};

// 拖拽中
const onDrag = (event) => {
  if (isDragging.value) {
    // 计算新的位置
    let newX = event.clientX - startPosition.value.x;
    let newY = event.clientY - startPosition.value.y;

    // 限制组件在父组件边界内
    const paletteWidth = palette.value.offsetWidth;
    const paletteHeight = palette.value.offsetHeight;

    newX = Math.max(0, Math.min(newX, parentRect.value.width - paletteWidth));
    newY = Math.max(0, Math.min(newY, parentRect.value.height - paletteHeight));

    // 更新位置
    position.value = { x: newX, y: newY };
  }
};

// 停止拖拽
const stopDrag = () => {
  isDragging.value = false;
  // 移除事件监听
  window.removeEventListener("mousemove", onDrag);
  window.removeEventListener("mouseup", stopDrag);
};

// 设备拖拽开始事件
const onDragStart = (device) => {
  event.dataTransfer.setData("text/plain", JSON.stringify(device));
};
</script>

<style lang="scss" scoped>
.device-palette {
  background: rgba(0, 0, 0, 0.05);
  width: 319px;
  position: absolute; /* 使用 absolute 定位 */
  z-index: 11;
  user-select: none; /* 防止拖拽时选中文本 */

  .palette-title {
    height: 46px;
    line-height: 46px;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    background: url("../../../assets/index/titBg.png") no-repeat;
    background-size: 100%;
    padding: 0 28px;
    position: relative;
    cursor: grab; /* 拖拽时显示抓取光标 */

    img {
      width: 16px;
      height: 10px;
      position: absolute;
      top: 7px;
      right: 7px;
      cursor: pointer;
      user-select: none; /* 防止拖拽时选中文本 */
    }
  }

  .device-card {
    padding: 20px 15px;
    border: 1px solid rgba(61, 115, 255, 0.3);
    .device-icons {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px 20px;
      .device-icon-container {
        margin: auto;
        text-align: center;
        cursor: grab; /* 拖拽时显示抓取光标 */
      }
      .device-name {
        margin-top: 2px;
        font-weight: 800;
        font-size: 14px;
        color: #ffffff;
        line-height: 16px;
      }
      .device-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 80px;
        padding: 10px;
        box-sizing: border-box;
        background: #080d16;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #305b7a;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>